<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="./vue.js"></script>
    <script>

        //全局组件
        //第一个参数是组件的名字，第二个参数是
        //1 parent 2 child
        Vue.component('child',{
            
            template:`
            <div>
                <p>我是一个孩子组件{{childData}}</p>
                <input type="text" v-model='childData'/>
                </div>
            `,
            props:['childData']
        });
        /**
         * 父--->子
         * 1、先给父组件中绑定自定义的属性
         * 2、在子组件中使用props接收父组件传递的数据、
         * 3、可以在子组件中任意使用
         * 
         * */
        Vue.component('parent',{
            data () {
                return {
                 msg:"我是父组件的数据"      

                }
            },
            template:`
            <div>
                <p>我是一个父组件</p>
                <child :childData='msg'/>
                </div>
            `
        })
        //1、声子
        var App={
            template:`
            <div>
                <parent/>
                
                </div>
            `
           
        };
        new Vue({
            el:"#app",
            data(){
                return{

                }
            },
             //2、挂子
            components:{
               
                App
            },
            //3、用子
            template:`<App/>`
        });
    </script>
</body>
</html>